<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%@ taglib prefix="t" tagdir="/WEB-INF/tags" %>
<% request.setAttribute("username_used_js", request.getAttribute("usernameUsed").toString()); %>

<t:wrapper title="Register">
	<script>
		$(document).ready(function(){
			$("#alertUsernameUsed").hide();
			
			$("#pass2").keyup(function(){
				checkPass(); 
				return false;
			});
			
			console.log(${username_used_js});
			if(${username_used_js} == true){
				console.log("ads");
				$("#alertUsernameUsed").show();
			}});
			function checkPass() { //Store the password field objects into variables ... 
				var pass1 = document.getElementById('pass1'); 
				var pass2 = document.getElementById('pass2'); 
				//Store the Confimation Message Object ... 
				var message = document.getElementById('confirmMessage'); //Set the colors we will be using ...
				 var goodColor = "#66cc66"; 
				 var badColor = "#ff6666"; //Compare the values in the password field //and the confirmation field 
				 if(pass1.value == pass2.value){ //The passwords match. //Set the color to the good color and inform //the user that they have entered the correct password 
				 	pass2.style.backgroundColor = goodColor; 
				 	message.style.color = goodColor; 
				 	message.innerHTML = "Passwords Match!" }
				 	else{ //The passwords do not match. //Set the color to the bad color and //notify the user. 
				 		pass2.style.backgroundColor = badColor; 
				 		message.style.color = badColor; 
				 		message.innerHTML = "Passwords Do Not Match!" } 
				 }; 
		
	</script>
	<div class="page-content">
		<div class="page-header">
			<h1>Signup</h1>
		</div>
		
		<div class="row">
			<div class="col-xs-4 col-xs-offset-1">
				<form class="form-horizontal" role="form" action="register" method="POST">
					<div class="form-group">
						<label for="username">Username</label>
						<input type="text" class="form-control" name="username" placeholder="Username" required />
						<div id="alertUsernameUsed" class="alert alert-danger">Username is already been taken</div>					
					</div>
					<div class="form-group">
						<label for="password">Password</label>
						<input type="password" class="form-control" name="password" placeholder="Password" required />
					</div>
					<div class="form-group">
						<label for="password">Repeat Password</label>
						<input type="password" class="form-control" name="password2" id="pass2" placeholder="Password" required />
						<span id="confirmMessage" class="confirmMessage"></span> 
					</div>
					<div class="form-group">
						<label for="name">Name</label>
						<input type="text" class="form-control" name="name" placeholder="Name" />
					</div>
					<div class="form-group">
						<label for="surname">Surname</label>
						<input type="text" class="form-control" name="surname" placeholder="Surname" />
					</div>
					<div class="form-group">
						<label for="email">Email</label>
						<input type="email" class="form-control" name="email" placeholder="Email" required />
					</div>
					<div class="clearfix form-actions">
						<button type="submit" class="btn btn-info">Login</button>
					</div>
				</form>
				
			</div>
		</div>
	</div>
	
</t:wrapper>
